<template>
  <div class="home">
    <el-container class="main-container" height="100%">
      <el-header height="" style="padding:0;">
        <v-head></v-head>
      </el-header>
      <el-container class="content-container">
        <el-aside width="200px">
          <s-lidebar></s-lidebar>
        </el-aside>
        <el-main>
          <el-card shadow="never" class="box-card" style="background-color: #EBEEF5">
            <el-breadcrumb style="padding-left: 20px" separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="cardName">{{cardName}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-card>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import vHead from 'COMPONENTS/header';
import sLidebar from 'COMPONENTS/sliderBar';
export default {
  name: 'home',
  data () {
    return {
      cardName: ''
    }
  },
  components: {
    vHead,
    sLidebar
  },
  created () {
    if (this.$route.meta.title) {
      this.cardName = this.$route.meta.title;
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.meta.title) {
        this.cardName = to.meta.title;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    height: 100%;
    .main-container {
      display: flex;
      height: 100%;
      .content-container {
        flex: 1;
        .box-card {
          margin-bottom: 20px;
        }
      }
    }
  }
</style>
